<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        width: 1200px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        line-height: 1.6;
        color: #333;
        background: #f5f6f7;
    }

    .match-header.victory {
        background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
        color: white;
        padding: 20px;
        position: relative;
        height: 200px;
        overflow: hidden;
    }

    .match-header.defeat {
        background: linear-gradient(135deg, #ff3318 0%, #ff664d 100%);
        color: white;
        padding: 20px;
        position: relative;
        height: 200px;
        overflow: hidden;
    }

    .match-header::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background: url('') no-repeat;
        background-size: cover;
        background-position: center;
        opacity: 0.3;
    }

    .victory-text {
        font-size: 48px;
        font-weight: bold;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .victory-text span {
        font-size: 24px;
    }

    .tabs {
        background: white;
        display: flex;
        padding: 10px 20px;
        border-bottom: 1px solid #eee;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .tab {
        padding: 10px 20px;
        cursor: pointer;
        position: relative;
        color: #666;
    }

    .tab.active {
        color: #1890ff;
        font-weight: bold;
    }

    .tab.active::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 100%;
        height: 2px;
        background: #1890ff;
    }

    .match-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    .stats-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .economy-bar {
        height: 24px;
        background: white;
        margin: 10px 0;
        position: relative;
        overflow: hidden;
        display: flex;
    }

    .economy-progress {
        height: 100%;
        background: linear-gradient(90deg, #096dd9 0%, #1890ff 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 15px;
        font-weight: bold;
    }

    .economy-remaining {
        height: 100%;
        background: red;
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 15px;
        color: white;
        font-weight: bold;
    }

    .economy-progress::before,
    .economy-progress::after {
        content: '';
        position: absolute;
        top: 0;
        width: 5px;
        height: 100%;
        background: white;
    }

    .economy-progress::before {
        left: 0;
    }

    .economy-progress::after {
        right: 0;
    }

    .player-list {
        display: flex;
        flex-direction: row;
        gap: 10px;
        flex-wrap: wrap;
    }

    .player-card {
        flex: 1 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
        display: flex;
        align-items: center;
        padding: 15px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        margin-bottom: 10px;
    }

    .player-avatar {
        width: 100px;
        height: 100px;
        border-radius: 12px;
        margin-right: 15px;
        position: relative;
    }

    .player-level {
        position: absolute;
        bottom: -5px;
        right: -5px;
        background: #ffd700;
        color: white;
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 8px;
    }

    .player-info {
        flex: 1;
    }

    .player-name {
        font-weight: bold;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .player-stats {
        color: #0f1612;
        font-size: 14px;
    }

    .equipment-list {
        display: flex;
        gap: 5px;
        margin-top: 10px;
    }

    .equipment-item {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f5f6f7;
        overflow: hidden;
    }

    .equipment-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .score {
        font-size: 24px;
        font-weight: bold;
        color: #1890ff;
        margin-left: auto;
        padding-left: 20px;
    }

    .resources {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }

    .resource-item {
        text-align: center;
        flex: 1;
    }

    .resource-icon {
        width: 40px;
        height: 40px;
        margin: 0 auto 5px;
        background: #f0f0f0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #333;
        font-weight: bold;
    }

    .resource-score {
        font-weight: bold;
    }

    .team-header {
        font-size: 18px;
        font-weight: bold;
        margin-top: 20px;
        margin-bottom: 10px;
        color: #1890ff;
    }

    .match-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        margin-bottom: 20px;
    }

    .match-info span {
        font-size: 14px;
        color: #666;
    }

    .match-type {
        font-weight: bold;
        color: #1890ff;
    }

    .team-header.stats {
        font-size: 18px;
        color: #666;
    }

    .team-header-container {
        display: flex;
        align-items: center;
        background: #e6f7ff;
        padding: 10px;
        border-radius: 8px;
        position: relative;
    }

    .team-header-container1 {
        display: flex;
        align-items: center;
        background: #ffe6e6;
        padding: 10px;
        border-radius: 8px;
        position: relative;
    }

    .team-header.victory {
        font-size: 18px;
        font-weight: bold;
        color: #1890ff;
        margin-right: 10px;
    }

    .team-header.defeat {
        font-size: 18px;
        font-weight: bold;
        color: #ff3318;
        margin-right: 10px;
    }

    .team-header.stats {
        font-size: 16px;
        color: #666;
    }
</style>

<body>
    <div class="match-header {{gameResult === '胜利' ? 'victory' : 'defeat'}}">
        <div class="victory-text">
            {{gameResult}} <span>{{gameResultEn}}<br>{{tips}}</span>
        </div>
    </div>

    <div class="tabs">
        <div class="tab active">总览</div>
    </div>

    <div class="match-content">
        <div class="match-info">
            <span class="match-type">{{mapName}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{startTime}}&nbsp;&nbsp;&nbsp;{{usedTime}}分钟&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{matchDesc}}</span>
        </div>

        <div class="stats-card">
            <div>经济</div>
            <div class="economy-bar">
                <div class="economy-progress" style="width: {{myEconomyRate}}%">{{myMoney}}</div>
                <div class="economy-remaining">{{enemyMoney}}</div>
            </div>
            <div class="resources">
                资源
                <div class="resource-item">
                    <div class="resource-icon">防御塔</div>
                    <div class="resource-score">{{myTowerCnt}}:{{enemyTowerCnt}}</div>
                </div>
                <div class="resource-item">
                    <div class="resource-icon">暴君</div>
                    <div class="resource-score">{{myLdragon1}}:{{enemyLdragon1}}</div>
                </div>
                <div class="resource-item">
                    <div class="resource-icon">暗影暴君</div>
                    <div class="resource-score">{{myBdragon1}}:{{enemyBdragon1}}</div>
                </div>
                <div class="resource-item">
                    <div class="resource-icon">风暴龙王</div>
                    <div class="resource-score">{{myBdragon3}}:{{enemyBdragon3}}</div>
                </div>
                <div class="resource-item">
                    <div class="resource-icon">主宰</div>
                    <div class="resource-score">{{myLdragon2}}:{{enemyLdragon2}}</div>
                </div>
                <div class="resource-item">
                    <div class="resource-icon">暗影主宰</div>
                    <div class="resource-score">{{myBdragon2}}:{{enemyBdragon2}}</div>
                </div>
            </div>
        </div>

        <div class="stats-card">
            <div class="{{gameResult === '胜利' ? 'team-header-container' : 'team-header-container1'}}">
                <h3 class="team-header {{gameResult === '胜利' ? 'victory' : 'defeat'}}">我方{{gameResult}}</h3>
                <h3 class="team-header stats">{{myKillDeadAssistCnt}}</h3>
            </div>
            <div class="player-list">
                {{each myRoles item}}
                <div class="player-card">
                    <img src="{{!item.battleRecords.usedSkin ? item.battleRecords.usedHero.heroIcon : item.battleRecords.usedSkin.skinIcon128128}}" alt="英雄头像" class="player-avatar">
                    <div class="player-info">
                        <div class="player-name">
                            {{item.basicInfo.roleName}}
                        </div>
                        <div class="hero-name" style="color: gray;">
                            {{!item.battleRecords.usedSkin ? item.battleRecords.usedHero.heroName : item.battleRecords.usedHero.heroName + ' - ' + item.battleRecords.usedSkin.skinName}}
                        </div>
                        <div class="player-stats">
                            {{item.battleStats.killCnt}}/{{item.battleStats.deadCnt}}/{{item.battleStats.assistCnt}}
                        </div>
                        <div class="equipment-list">
                            <div class="equipment-item"><img src="{{item.battleRecords.skill.skillIcon}}" alt="技能">
                            </div>
                            {{each item.battleRecords.finalEquips item}}
                            <div class="equipment-item"><img src="{{item.equipIcon}}" alt="装备"></div>
                            {{/each}}
                        </div>
                    </div>
                    <div class="score">{{item.battleStats.gradeGame}}分</div>
                </div>
                {{/each}}
            </div>
        </div>

        <div class="stats-card">
            <div class="{{gameResult === '胜利' ? 'team-header-container1' : 'team-header-container'}}">
                <h3 class="team-header {{gameResult === '胜利' ? 'defeat' : 'victory'}}">敌方{{gameResult === '胜利' ? '失败' : '胜利'}}</h3>
                <h3 class="team-header stats">{{enemyKillDeadAssistCnt}}</h3>
            </div>
            <div class="player-list">
                {{each enemyRoles item}}
                <div class="player-card">
                    <img src="{{!item.battleRecords.usedSkin ? item.battleRecords.usedHero.heroIcon : item.battleRecords.usedSkin.skinIcon128128}}" alt="英雄头像" class="player-avatar">
                    <div class="player-info">
                        <div class="player-name">
                            {{item.basicInfo.roleName}}
                        </div>
                        <div class="hero-name" style="color: gray;">
                            {{!item.battleRecords.usedSkin ? item.battleRecords.usedHero.heroName : item.battleRecords.usedHero.heroName + ' - ' + item.battleRecords.usedSkin.skinName}}
                        </div>
                        <div class="player-stats">
                            {{item.battleStats.killCnt}}/{{item.battleStats.deadCnt}}/{{item.battleStats.assistCnt}}
                        </div>
                        <div class="equipment-list">
                            <div class="equipment-item"><img src="{{item.battleRecords.skill.skillIcon}}" alt="技能">
                            </div>
                            {{each item.battleRecords.finalEquips item}}
                            <div class="equipment-item"><img src="{{item.equipIcon}}" alt="装备"></div>
                            {{/each}}
                        </div>
                    </div>
                    <div class="score">{{item.battleStats.gradeGame}}分</div>
                </div>
                {{/each}}
            </div>
        </div>
    </div>
</body>